define(["../logic/preview", "../common/common"],
function(pluginClass, c) {
    return {
        pluginClass: pluginClass,
        style: {
            backgroundColor: 'transparent'

        },
        nocache: true,
        root: ["mainvlayout","closeBtn"],
        components: {
          mainvlayout:{
            type:"vbox",
            items: [
                {
                    root: ["segment"],
                    style: {
                        height: "60px"
                    }
                },
                {
                    root: ["statusview"],
                    style: {}
                }
            ]
          },
          segment:{
            type:"repeat",
            selectedMode:"s",
            style:{
              width:180,
              fontSize:14,
              color:"#fff",
              overflow:"hidden",
              backgroundColor:"transparent",
              cursor:"pointer",
              margin:"10px auto",
              height:44,
              lineHeight:"44px",
              borderRadius:"5px",
              border:"1px solid #1FDA9A"
            },
            items:[{label:"web端"},{label:"移动端"}],
            root:["segment_text"],
            itemStyle:{
              float:"left",
              width:"50%",
              height:"100%"
            }
          },
          segment_text:{
            selectedClassName:"preview-segment-selected",
            type:"text",
            text_bind:"label"
          },
          statusview:{
            ref:true,
            type:"statusview",
            style:{
              height:"100%"
            },
            defaultKey:"web_view"
          },
          web_view:{
            type:"vbox",
            style:{
              height:"100%"
            },
            items:[
              {
                root:["web_view_header"],
                style:{
                  height:40,
                  backgroundColor:"#F2F3F4"
                },
              },
              {
                root:["web_view_body"],
                style:{
                  backgroundColor:"#fff"
                }
              }
            ],
          },
          web_view_header:{
            type:"view"
          },
          web_view_body:{
            className:"web-preview",
            type:"view",
            style:{
              overflow:"auto",
              height:"100%"
            },
            ref:true
          },
          mobild_view:{
            type:"view",
            style:{
              width:"311px",
              height:"100%",

              margin:"auto",
              backgroundColor:"#fff",
              borderRadius:"20px"
            },
            root:["mobild_webview"]
          },
          mobild_webview:{
            ref:true,
            delay:4000,
            style:{
              top:40,
              bottom:30,
              left:0,
              right:0,
              position:"absolute",
              borderTop:"1px solid #dddddd",
              borderBottom:"1px solid #dddddd"
            },
            type:"webview"
          },

          closeBtn:{
              type:"icon",
              style:{
                  position:"fixed",
                  top:25,
                  right:200,
                  color:"#ffffff",
                  fontSize:24,
                  cursor:"pointer"
              },
              font:"icomoon_e927"
          }
        }
    };
});
